<template>
  <div>
    <div class="pageTitleWhole">
      <a-breadcrumb>
        <a-breadcrumb-item>集团利润表</a-breadcrumb-item>
      </a-breadcrumb>
    </div>

    <div class="pageContentWhole">
      <a-row>
        <a-col :span="24">
          <a-form layout="inline">
            <a-form-item label="按月查看">
              <a-range-picker :mode="['month', 'month']" :placeholder="['请选择开始年月', '请选择结束年月']"
                format="YYYY-MM" :open="isopen" :value="dateT"
                @change="onchange1"
                @openChange="onOpenChange" @panelChange="onPanelChange">
                <a-icon slot="suffixIcon" type="calendar" />
                <template slot="renderExtraFooter">
                  <a-button type="primary" size="small" @click="chooseDate">确定</a-button>
                  <a-button type="primary" ghost size="small" @click="cancelChooseDate">取消</a-button>
                </template>
              </a-range-picker>
            </a-form-item>

            <a-form-item>
              <a-button type="primary" @click="handleSubmit1">查询</a-button>
            </a-form-item>
            <a-form-item>
              <a-button type="primary" @click="addItem">+  添加</a-button>
            </a-form-item>
          </a-form>

          <a-table :columns="columns" :data-source="tableData" :loading="loading" class="tableMargin" :pagination="pagination" rowKey="id">
            <template slot="rn" slot-scope="text, record, index">{{index + 1}}</template>
            <template slot="operation" slot-scope="text, record">
                <a @click="editIt(record)">编辑</a>
              </template>
          </a-table>
        </a-col>
      </a-row>
    </div>

    <!-- 添加/编辑 -->
    <a-modal :visible="visible" :title="title" :confirmLoading="confirmLoading"
      :destroyOnClose="true" :maskClosable="false"
      @ok="handleOk"
      @cancel="handleCancel"
      >
      <a-form-model
        ref="rulesForm"
        :model="form" :label-col="labelCol" :wrapper-col="wrapperCol"
        :rules="rules">
        <a-form-model-item label="年月" prop="yearAndMonth">
          <a-month-picker :value="month" @change="onChangeMonth"></a-month-picker>
        </a-form-model-item>
        <a-form-model-item label="利润总额" prop="profitAmount">
          <a-input-number :min="0" :precision="2" :max="999999999999.99" v-model="form.profitAmount" style="width: 100%"></a-input-number>
        </a-form-model-item>
        <a-form-model-item label="投资金额" prop="investmentAmount">
          <a-input-number :min="0" :precision="2" :max="999999999999.99" v-model="form.investmentAmount" style="width: 100%"></a-input-number>
        </a-form-model-item>
        <a-form-model-item label="货币金额" prop="currencyAmount">
          <a-input-number :min="0" :precision="2" :max="999999999999.99" v-model="form.currencyAmount" style="width: 100%"></a-input-number>
        </a-form-model-item>
        <a-form-model-item label="应收账款" prop="receivableAmount">
          <a-input-number :min="0" :precision="2" :max="999999999999.99" v-model="form.receivableAmount" style="width: 100%"></a-input-number>
        </a-form-model-item>
        <a-form-model-item label="其它应收" prop="otherReceivableAmount">
          <a-input-number :min="0" :precision="2" :max="999999999999.99" v-model="form.otherReceivableAmount" style="width: 100%"></a-input-number>
        </a-form-model-item>
        <a-form-model-item label="应付账款" prop="payableAmount">
          <a-input-number :min="0" :precision="2" :max="999999999999.99" v-model="form.payableAmount" style="width: 100%"></a-input-number>
        </a-form-model-item>
        <a-form-model-item label="其它应付" prop="otherPayableAmount">
          <a-input-number :min="0" :precision="2" :max="999999999999.99" v-model="form.otherPayableAmount" style="width: 100%"></a-input-number>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import {queryCompanyProfitReportList, addCompanyProfitReport, updateCompanyProfitReport} from '@/api/financialCenter'

const fomrMessage = `必填项不能为空`
const defaultForm = () => {
  return {
    id: null, // 利润报表id
    yearAndMonth: '', // 对账日期查询，开始时间
    profitAmount: '', // 利润总额
    investmentAmount: '', // 投资金额
    currencyAmount: '', // 货币金额
    receivableAmount: '', // 应收账款
    otherReceivableAmount: '', // 其它应收
    payableAmount: '', // 应付账款
    otherPayableAmount: '' // 其它应付
  }
}

export default {
  data () {
    const columns = [
      {
        title: '序号',
        width: 60,
        scopedSlots: {customRender: 'rn'}
      },
      {
        title: '年月',
        width: 90,
        dataIndex: 'yearAndMonth'
      },
      {
        title: '利润总额',
        dataIndex: 'profitAmount'
      },
      {
        title: '+',
        width: 40
      },
      {
        title: '投资金额',
        dataIndex: 'investmentAmount'
      },
      {
        title: '=',
        width: 40
      },
      {
        title: '货币资金',
        dataIndex: 'currencyAmount'
      },
      {
        title: '+',
        width: 40
      },
      {
        title: '应收账款',
        dataIndex: 'receivableAmount'
      },
      {
        title: '+',
        width: 40
      },
      {
        title: '其它应收',
        dataIndex: 'otherReceivableAmount'
      },
      {
        title: '-',
        width: 40
      },
      {
        title: '应付账款',
        dataIndex: 'payableAmount'
      },
      {
        title: '-',
        width: 40
      },
      {
        title: '其它应付',
        dataIndex: 'otherPayableAmount'
      },
      {
        title: '操作',
        width: 80,
        scopedSlots: {customRender: 'operation'}
      }
    ]

    return {
      isopen: false,
      searchForm: {
        searchStartTime: '',
        searchEndTime: ''
      },
      dateT: null,
      searchStartTimeT: '',
      searchEndTimeT: '',
      columns,
      tableData: [],
      loading: false,
      pagination: {},
      pageNum: 1,
      pageSize: 10,
      // modal
      labelCol: {span: 8},
      wrapperCol: {span: 14},
      visible: false,
      title: '',
      confirmLoading: false,
      month: null,
      form: defaultForm(),
      rules: {
        yearAndMonth: [{required: true, message: fomrMessage, trigger: ['blur', 'change']}], // 对账日期查询，开始时间
        profitAmount: [{required: true, message: fomrMessage, trigger: 'blur'}], // 利润总额
        investmentAmount: [{required: true, message: fomrMessage, trigger: 'blur'}], // 投资金额
        currencyAmount: [{required: true, message: fomrMessage, trigger: 'blur'}], // 货币金额
        receivableAmount: [{required: true, message: fomrMessage, trigger: 'blur'}], // 应收账款
        otherReceivableAmount: [{required: true, message: fomrMessage, trigger: 'blur'}], // 其它应收
        payableAmount: [{required: true, message: fomrMessage, trigger: 'blur'}], // 应付账款
        otherPayableAmount: [{required: true, message: fomrMessage, trigger: 'blur'}] // 其它应付
      }
    }
  },
  methods: {
    handleSubmit1 () {
      this.pageNum = 1
      this.handleSubmit()
    },
    handleSubmit () {
      this.loading = true
      queryCompanyProfitReportList({
        ...this.searchForm,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(rsp => {
        this.loading = false
        this.tableData = rsp.data.list
        this.pagination = {
          current: this.pageNum,
          pageSize: rsp.data.pageSize,
          total: rsp.data.total,
          showQuickJumper: false,
          showSizeChanger: true,
          showTotal: total => `共${total}条记录 第${this.pageNum}/${rsp.data.pages}页`,
          onChange: pageNum => {
            this.pageNum = pageNum
            this.handleSubmit()
          },
          onShowSizeChange: (current, size) => {
            this.pageNum = current
            this.pageSize = size
            this.handleSubmit()
          }
        }
      }).catch(() => { this.loading = false })
    },
    // 月份范围选择
    onOpenChange () {
      this.isopen = true
    },
    onchange1 (v) {
      if (v.length === 0) {
        this.dateT = null
        this.searchForm.searchStartTime = ''
        this.searchForm.searchEndTime = ''
      }
    },
    chooseDate () {
      this.isopen = false
      this.dateT = [this.searchStartTimeT, this.searchEndTimeT]
      this.searchForm.searchStartTime = this.searchStartTimeT.format('YYYY-MM')
      this.searchForm.searchEndTime = this.searchEndTimeT.format('YYYY-MM')
    },
    cancelChooseDate () {
      this.isopen = false
    },
    onPanelChange (v, m) {
      this.searchStartTimeT = v[0]
      this.searchEndTimeT = v[1]
    },
    // 添加
    addItem () {
      if (!this.$root._bc.create) {
        this.$message.error('您无此权限！')
        return
      }
      this.form = defaultForm()
      this.title = '添加'
      this.month = null
      this.visible = true
    },
    // 编辑
    editIt (item) {
      if (!this.$root._bc.edit) {
        this.$message.error('您无此权限！')
        return
      }
      this.form = {...item}
      this.month = item.yearAndMonth
      this.title = '编辑'
      this.visible = true
    },
    onChangeMonth (date, dateStr) {
      if (date) {
        this.form.yearAndMonth = date.startOf('month').format('YYYY-MM')
      } else {
        this.form.yearAndMonth = ''
      }
      this.month = date
    },
    handleOk () {
      this.$refs.rulesForm.validate(valid => {
        if (valid) {
          this.confirmLoading = true
          if (!this.form.id) {
            addCompanyProfitReport(this.form).then(rsp => {
              this.$message.success('添加成功')
              this.visible = false
              this.handleSubmit()
              setTimeout(() => { this.confirmLoading = false }, 1000)
            }).catch(() => { this.confirmLoading = false })
          } else {
            updateCompanyProfitReport(this.form).then(rsp => {
              this.$message.success('编辑成功')
              this.visible = false
              this.handleSubmit()
              setTimeout(() => { this.confirmLoading = false }, 1000)
            }).catch(() => { this.confirmLoading = false })
          }
        }
      })
    },
    handleCancel () {
      this.visible = false
    }
  },
  mounted () {
    this.handleSubmit()
  }
}
</script>

<style lang="less" scoped>
</style>
